<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站后台管理系统</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css"/>
<![endif]-->
<link rel="stylesheet" type="text/css"  href="../../../../public/admin/css/login.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/login.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css">
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
</head>
<body onLoad="javascript:document.login.username.focus();">
<div class="login-container" style="height:100%">
<!-- 页面表单主体 开始 -->
    <div class="container" style="top:20%;">

        <form name="login" action="{:u('Admin/Login/login')}" onSubmit="return CheckForm();" data-time="0.001" data-auto="true" method="post" class="content layui-form">
            <div class="people">
                <div class="tou"></div>
                <div id="left-hander" class="initial_left_hand transition"></div>
                <div id="right-hander" class="initial_right_hand transition"></div>
            </div>
            <ul>
                <li>
                    <input id="username" name="username" style="display:none"/ >
                    <input required="required" id="username" name="username" value="" autocomplete="off" autofocus="autofocus" class="login-input username" placeholder="请输入用户名/手机号码"/>
                </li>
                <li>
                    <input name='password' style='display:none'/>
                    <input required="required" id="password"  type="password" name="password" value="" autocomplete="off" class="login-input password" placeholder="请输入密码"/>
                </li>
                <li>
                    <input required="required" id="code"  type="text" name="code" value="" autocomplete="off" class="login-input code" placeholder="验证码" style="width:60px; float:left;"/>&nbsp;&nbsp;
                    <img style="cursor:pointer" src="{:U('Admin/login/verify')}" id="verify_img" alt="点击切换验证码" height="38px">&nbsp;&nbsp;
                    <span id="chkcode"></span>
                </li>
                <li class="text-center">
                    <button type="submit" class="layui-btn" >立即登录</button>
                    <a style="position:absolute;display:block;right:0" href="javascript:void(0)">忘记密码？</a>
                </li>
            </ul>
        </form>
    </div>
</div>
</body>
</html>
<script>
    if (window.location.href.indexOf('#') > -1) {
        window.location.href = window.location.href.split('#')[0];
    }
    $(function(){
	    $("#password").on('focus', function () {
            $('#left-hander').removeClass('initial_left_hand').addClass('left_hand');
            $('#right-hander').removeClass('initial_right_hand').addClass('right_hand')
        }).on('blur', function () {
            $('#left-hander').addClass('initial_left_hand').removeClass('left_hand');
            $('#right-hander').addClass('initial_right_hand').removeClass('right_hand')
        });/*动画*/
		
		$("#verify_img").click(function() {
			var verifyURL = "{:U('Admin/login/verify')}";
			var time = new Date().getTime();
			$("#verify_img").attr({
			   "src" : verifyURL + "/?" + time
			});
		 });
		
		var f = document.login;
		
		$("#username").on('blur',function(){
		   var username = $(this).val();
		   if(username == "" || username.length == "0"){
		       $(this).attr('placeholder','请输入登录名');
			   $(this).css('border-color','red');
		   }else{
		       $(this).css('border-color','#e2e2e2');
		   }
		})
		$("#code").bind("input propertychange",function(){
		    var code = $(this).val();
			if(code == "" || code.length == "0"){
		       $(this).attr('placeholder','请输入验证码');
			   $(this).css('border-color','red');
			   $("#chkcode").html("<img src='__PUBLIC__/admin/images/cuo.png'>");
		   }else if(code.length != 4){
		       $(this).attr('placeholder','长度错误');
			   $(this).css('border-color','red');
			   $("#chkcode").html("<img src='__PUBLIC__/admin/images/cuo.png'>");
		   }else{
		      $.ajax({
			       url:"{:U('Admin/Login/check_verify')}",
				   dataType:"json",
				   data: {'code':$("#code").val()},
				   type:'get',
				   success:function(data){
				     if(data){
				         $("#chkcode").html("<img src='__PUBLIC__/admin/images/dh.png'>");
					  }else{
					     $("#chkcode").html("<img src='__PUBLIC__/admin/images/cuo.png'>");
					  }
				   }
			  });
		      $(this).css('border-color','#e2e2e2');
		   }
		})
		
		
		
	});
   
   function CheckForm(){
	    if(document.login.Password.value == ""){
		    alert("请输入您的密码！");
		    document.login.Password.focus();
		    return false;
	     }
	     if(document.login.code.value == ""){
		    alert("请输入验证码！");
		    document.code.Password.focus();
		    return false;
	     }
		 return true;
   }
</script>
